<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCategoryByParentId, postCategoryDel } from '@/apis/apis.js'
import AddDialog from '@/components/CategoryList/AddDialog.vue'
import EditDialog from '@/components/CategoryList/EditDialog.vue'

const tableData = ref([])
const breadcrumbData = ref([])
const route = useRoute()
const addRef = ref(null)
const editRef = ref(null)

const handleDelete = async (id, index) => {
  ElMessageBox.confirm(
    '确认删除？',
    '标题',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    try {
      const res = await postCategoryDel({
        id: String(id)
      })
      if (!res.status) {
        ElMessage({ type: 'info', message: res.msg })
      }
      else {
        ElMessage({ type: 'success', message: res.msg })
        tableData.value.splice(index, 1)
      }
    }
    catch (err) {
      ElMessage({ type: 'info', message: '网络异常' })
    }
  })
}
const handleAdd = () => {
  addRef.value.updateVisible(true)
}
const handleReload = async () => {
  try {
    const res = await getCategoryByParentId({
      parent_id: route.query.parent_id
    })
    if (!res.status) {
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      tableData.value = res.data.list
      if (res.data.path) {
        breadcrumbData.value = res.data.path
      }
      else {
        breadcrumbData.value = []
      }
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
}
const handleEdit = (id) => {
  editRef.value.updateVisible({
    visible: true,
    id
  })
}

onMounted(async () => {
  try {
    const res = await getCategoryByParentId({
      parent_id: route.query.parent_id
    })
    if (!res.status) {
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      tableData.value = res.data.list
      if (res.data.path) {
        breadcrumbData.value = res.data.path
      }
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
})

watch(() => {
  return route.query.parent_id
}, async (newValue) => {
  try {
    const res = await getCategoryByParentId({
      parent_id: newValue
    })
    if (!res.status) {
      ElMessage({ type: 'info', message: res.msg })
    }
    else {
      tableData.value = res.data.list
      if (res.data.path) {
        breadcrumbData.value = res.data.path
      }
      else {
        breadcrumbData.value = []
      }
    }
  }
  catch (err) {
    ElMessage({ type: 'info', message: '网络异常' })
  }
})
</script>

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home/category/list', query: { parent_id: 0 } }">
      <el-icon>
        <House />
      </el-icon>
    </el-breadcrumb-item>
    <el-breadcrumb-item v-for="item in breadcrumbData" :key="item.id"
      :to="{ path: '/home/category/list', query: { parent_id: item.id } }">
      {{ item.name }}
    </el-breadcrumb-item>
  </el-breadcrumb>
  <el-button type="primary" class="add" @click="handleAdd">添加类别</el-button>
  <el-table border :data="tableData">
    <el-table-column label="ID" width="180" prop="id" />
    <el-table-column label="名称">
      <template #default="{ row }">
        <router-link :to="`/home/category/list?parent_id=${row.id}`">{{ row.name }}</router-link>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="180">
      <template #default="{ row }">
        {{ row.status === '1' ? '显示' : '隐藏' }}
      </template>
    </el-table-column>
    <el-table-column label="日期" prop="create_time" />
    <el-table-column label="操作">
      <template #default="{ row, $index }">
        <el-button type="primary" @click="handleEdit(row.id)">编辑</el-button>
        <el-button @click="handleDelete(row.id, $index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <AddDialog ref="addRef" :level="breadcrumbData.length + 1" @reload="handleReload" />
  <EditDialog ref="editRef" @reload="handleReload" />
</template>

<style scoped lang="scss">
.add {
  margin: 20px 0;
}
</style>
